<template>
  <div class="dashboard-container">
    <el-row :gutter="10">
      <el-col :span="18">
        <tickets />
      </el-col>
      <el-col :span="6">
        <article-list />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getMonthStartTime } from '@/utils/validate'
import { mapGetters } from 'vuex'
import tickets from './components/tickets.vue'
import articleList from './components/article.vue'
export default {
  name: 'Dashboard',
  components: {
    tickets,
    articleList
  },
  computed: {
    ...mapGetters(['name'])
  },
  created() {
    this.getMonthStartFn()
    this.$store.dispatch('user/getStatsAction', {
      userId: this.$store.getters.userId,
      start: this.$store.getters.start,
      end: this.$store.getters.end
    })
    this.$store.dispatch('user/getOrderAction', {
      start: this.$store.getters.start,
      end: this.$store.getters.end
    })
    this.$store.dispatch('user/getIncomeAction', {
      start: this.$store.getters.start,
      end: this.$store.getters.end
    })
    this.$store.dispatch('user/getHotlistAction', {
      start: this.$store.getters.start.substring(0, 10),
      end: this.$store.getters.end.substring(0, 10)
    }),
    this.$store.dispatch('user/getSaleDataAction', {
      num: 1,
      start: this.$store.getters.start.substring(0, 8) + '24',
      end: this.$store.getters.end.substring(0, 10)
    })
  },
  methods: {
    async getMonthStartFn() {
      const getMonthStart = await getMonthStartTime()
      this.$store.commit('user/setTime', getMonthStart)
    }
  }
}
</script>

<style lang="less" scoped>
.dashboard {
  .container {
    background-color: #f8fafd;
  }
}
</style>
